<template>
    <div class="user-manage">
        <el-table ref="multipleTable" tooltip-effect="dark" style="width: 100%" :data="userData">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="userName" label="用户名">
            </el-table-column>
            <el-table-column prop="nickName" label="昵称">
            </el-table-column>
            <el-table-column prop="identityNum" label="身份证" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="role" label="角色" width="140"> </el-table-column>
            <el-table-column prop="phone" label="电话" width="120"> </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="创建日期" width="100">
                <template #default="scope">{{
                    scope.row.createTime.slice(0, 10)
                    }}</template>
            </el-table-column>
            <el-table-column label="修改日期" width="100">
                <template #default="scope">{{ scope.row.updateTime.slice(0, 10) }}</template>
            </el-table-column>
            <el-table-column label="操作" width="110">
                <template #default="scope">
                    <div>
                        <el-button type="success" :icon="Edit" circle @click="managerChangeInfo(scope.row)"></el-button>
                        <el-button type="danger" :icon="Delete" circle
                            @click="deleteUserNameClick(scope.row.userName)">
                        </el-button>
                        <el-dialog title="提示" v-model="dialogVisible" width="30%">
                            <span>确认删除该用户</span>
                            <br>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="success" @click="managerDeleteUser(deleteUserName)">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                </template>
            </el-table-column>
        </el-table>



        <el-dialog title="用户信息" v-model="dialogFormVisible" class="manager-change-user-info">
            <el-form class="user-info">
                <el-form-item label="用户名" :label-width="formLabelWidth" class="manager-change-name">
                    <el-input autocomplete="off" v-model="updateUserData.userName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" class="manager-change-phone">
                    <el-input autocomplete="off" v-model="updateUserData.nickName"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth" class="manager-change-phone">
                    <el-input autocomplete="off" v-model="updateUserData.identityNum"></el-input>
                </el-form-item>
                <el-form-item label="角色" :label-width="formLabelWidth" class="manager-change-role">
                    <el-input autocomplete="off" v-model="updateUserData.role"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" class="manager-change-phone">
                    <el-input autocomplete="off" v-model="updateUserData.phone"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" class="manager-change-address">
                    <el-input autocomplete="off" v-model="updateUserData.address"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="success" @click="submitCHangeInfo">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import {
    deleteUserByUsername,
    updateUserByUsername,
    selectAllUserPage,
} from "@/api/user";
import { ref } from "vue";
import { ElMessage } from 'element-plus';

const userData = ref([]);
const dialogVisible = ref(false);
const dialogFormVisible = ref(false);
const deleteUserName = ref("");
const formLabelWidth = ref("100px");
const total = ref(0);
const pageSize = ref(9);
const updateUserData = ref({});

// 加载数据
const load = () => {
    selectAllUserPage({
        pageNum: 1,
        pageSize: pageSize.value,
    }).then((res) => {
        userData.value = res.data.data;
        total.value = res.data.total;
    });
    dialogFormVisible.value = false;
    dialogVisible.value = false;
}
load();

// handleCurrentChange
const handleCurrentChange = (pageNum) => {
    selectAllUserPage({
        pageNum: pageNum,
        pageSize: pageSize.value,
    }).then((res) => {
        userData.value = res.data.data;
        total.value = res.data.total;
    });
}


//修改
const managerChangeInfo = (user) => {
    updateUserData.value = user;
    dialogFormVisible.value = true;
}

const submitCHangeInfo = () => {
    updateUserByUsername({
        userName: updateUserData.value.userName,
        nickName: updateUserData.value.nickName,
        identityNum: updateUserData.value.identityNum,
        phone: updateUserData.value.phone,
        address: updateUserData.value.address,
        role: updateUserData.value.role,
    }).then((res) => {
        if (res.flag == true) {
            ElMessage.success(res.message);
            load();
        } else {
            ElMessage.error(res.message);
        }
    })
}

//deleteUserNameClick
const deleteUserNameClick = (val) => {
    dialogVisible.value = true;
    deleteUserName.value = val;
}

//managerDeleteUser
const managerDeleteUser = (userName) => {
    deleteUserByUsername({
        username: userName,
    }).then((res) => {
        if (res.flag == true) {
            ElMessage.success(res.message);
            load();
        } else {
            ElMessage.error(res.message);
        }
    });
}

</script>

<style lang="scss" scoped>
.user-manage {
    width: 1100px;
    background: #fff;
    margin: 10px auto;
    padding: 10px 20px;

    .manager-change-user-info {
        .el-dialog {
            width: 500px;

            .el-dialog__body {
                height: 400px;

                .user-info {
                    width: 400px;
                    padding: 0;

                    .manager-change-name,
                    .manager-change-password,
                    .manager-change-phone,
                    .manager-change-address {
                        .el-form-item__label {
                            width: 100px !important;
                        }

                        width: 400px;
                        margin-right: 200px;
                    }
                }
            }
        }
    }
}
</style>